<template>
	<view>
		<view class="f-center tab-nav">
			<view class="f-center ">逾期 <view class="myAddDataCount">{{myAddData.YQNumber}}</view></view>
			<view class="f-center">今日任务<view class="myAddDataCount">{{myAddData.CurNumber}}</view></view>
			<view class="f-center">已完成<view class="myAddDataCount">{{myAddData.CurNumber_NoFinish}}</view></view>
		</view>
		<view class="tab-bar">
			<tab-bar style="width: 100%;" :tabBars="tabBar.tabBars" :tabIndex="tabBar.tabIndex" @tapTab="tapTab"></tab-bar>
		</view>
		<view class="content">
			<view class="search-wrap flex f-center">
				<view class="iconfont icon-sousuo1 " @tap.prevent = "do_search"></view>
				<input @blur="do_search"  type="text" value="" v-model="queryText" placeholder="查询车牌号/项目分类"/>
				<view class="flex search-right f-center" @tap.stop="do_searchDetail"><view class="iconfont icon-shaixuan"></view><view>筛选</view></view>
			</view>
			<view class="searcd-detail" v-if="timeSelectShow" @tap.prevent="do_closeSearcd">
				<view @tap.stop>
					<view class="search-wrap flex f-center">
						<view class="iconfont icon-sousuo1"></view>
						<input @blur="do_search"  type="text" value="" v-model="queryText" placeholder="查询车牌号/项目分类"/>
						<view class="flex search-right f-center" ><view class="iconfont icon-shaixuan"></view><view>筛选</view></view>
					</view>
					<view class="time-select " >
						<view class="f-side"><view>时间段</view><view @tap="def_initDate">重置日期</view></view>
						<view class="date-wraper f-side">
							<view class="picker f-center">
								<picker @change="getStartDate"  mode="date" :value="startDateShow" style="width: 100%;height: 100%;">
									<!-- <view class="startTime" :class="isStartTime?'startTime':'startTime2'">{{tabBar.tabIndex==0?startDate:startDateFinish}}</view> -->
									<view class=" f-center" style="height: 70upx;">{{tabBar.tabIndex==0?startDate:startDateFinish}}</view>
								</picker>
							</view>
							<view class="line"></view>
							<view class="picker f-center">
								<picker @change="getEndDate"  mode="date"  :value="endDateShow" style="width: 100%;height: 100%;">
									<view class="f-center" style="height: 70upx;">{{tabBar.tabIndex==0?endDate:endDateFinish}}</view>
								</picker>
							</view>
						</view>
						<view class="search-btn"> <button type="primary" @tap.stop="do_search">确定</button></view>
					</view>
				</view>
			</view>
			<swiper :duration="300" class="swiper-box" :current="tabBar.tabIndex" @change="swiperChange" >
				<swiper-item catchtouchmove="false">
					<scroll-view scroll-y class="scroll-view" @scrolltolower="do_getMore" v-if="tabBar.tabIndex==0">
						<block v-for="(item,index) in visitData" :key="index">
							<view class="task-wrap" >
									<view class="task-title" v-bind:style="{ borderTop:'10rpx solid #'+ item.Color1,'color':'#333','borderBottom':'1rpx solid #e5e5e5'}">
										<view class="f-side">
											<view class="flex itemCenter">
												{{item.Class3}} 
											</view>
											<view>{{item.TimeState}}</view>
										</view>
									</view>
									<view class="flex car-id"><view class="f-center">{{item.VehiclePlateNo}}</view><view class="f-center" > <view v-if="item.VehicleType">({{item.VehicleType}})</view></view> </view>
									<!-- <view class="height-fixed">轮胎换位首保</view> -->
									<view class="f-side height-fixed"><view>{{item.ForwardDate}}</view><view class="iconfont icon-bianji" @tap="do_edit(item)"></view></view>
							</view>
						</block>
																		<!-- 上拉加载 -->
						<view v-show="loadingText" class="uni-tab-bar-loading">
							{{loadingText}}
						</view>
						<view v-if="visitData.length==0" class="uni-tab-bar-loading" style="text-align: center;">
							<view class="no_model">
								<image src="../../static/no_data.png" mode="widthFix" style="width: 100%;"></image>
								<view class="no_text">暂无数据</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item catchtouchmove="false">
					<scroll-view scroll-y class="scroll-view" @scrolltolower="do_getMore" v-if="tabBar.tabIndex==1">
						<block v-for="(item,index) in visitDataFinsh" :key="index">
							<taskRecent :item="item"  @do_changeItem='do_changeItem' :reasonArray="reasonArray" :isVisit="true"></taskRecent>
						</block>
																		<!-- 上拉加载 -->
						<view v-show="loadingText" class="uni-tab-bar-loading">
							{{loadingText}}
						</view>
						<view v-if="visitDataFinsh.length==0" class="uni-tab-bar-loading" style="text-align: center;">
							<view class="no_model">
								<image src="../../static/no_data.png" mode="widthFix" style="width: 100%;"></image>
								<view class="no_text">暂无数据</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	let _this;
	import tabBar from "../../components/tab-bar/tab-bar.vue"
	import taskRecent  from "../../components/visit/task_follow_recent.vue"
	export default {
		components:{
			tabBar,
			taskRecent
		},
		data() {
			return {
				timeSelectShow:false,
				startDateShow:'', //用于选择初始日期开始
				endDateShow:'', //用于选择初始日期结束
				startDate:'', //未完成开始日期
				endDate:'',   //未完成结束日期
				startDateFinish:'', //已完成开始日期
				endDateFinish:'',   //已完成结束日期
					tabBar:{
					tabIndex:0,
					tabBars:[
						{	name:'未完成'},
						{name:'已完成'}
					]
				},
				visitData:[]  ,//查询列表数据未完成
				visitDataFinsh:[], //查询已完成数据
				queryStr:{}  ,//查询条件
				isStartTime:true,
				queryText:""  ,//查询输入框内容  
				showTost:false  ,//如果点击查询显示就要来个toast
				noData:false,
				visitDataFinish:[] ,//完成后的回访数据
				reasonArray:[]  ,//跟进原因汇总
				loadingText: ''  ,//
				pages:10,	// 每页 显示多少条数据
				pageIndex0:0,	// 当前数据开始数据是第几条
				pageIndex1:0,	// 当前数据开始数据是第几条
				dataLength0:0,	// 当前数据返回个数
				dataLength1:0,	// 当前数据返回个数
				myAddData:{}  ,//新加我的回访数据统计
				finishReq:true   //防止重复请求
			}
		},
		created(){
			_this = this ;
		},
		onLoad(){
      _this.def_initQuery();
			//_this.getTraceTaskInfo();
			_this.QueryTraceResultReasonList();  //获取跟进原因
		},
		onShow(){
     _this.def_initQuery()
		},
		methods: {
			def_initQuery(){
				_this.tabBar.tabIndex = 0;
				_this.pageIndex0 = 0;
				  _this.isStartTime = true;
			    _this.startDateShow='';
					_this.startDate = "";
					_this.startDateFinish = "";
					_this.endDateShow=_this.def_date("end");
					_this.queryStr={
						D_Max:_this.endDateShow,
						D_Min:"",
						D_No:_this.queryText,
						PageIndex:_this.pageIndex0,
						Pages:_this.pages
				};
				_this.endDate =_this.endDateShow;
				_this.endDateFinish = _this.endDateShow;
				_this.getTraceTaskInfo();
				_this.getTraceTask_ListShow(_this.queryStr,"getTraceTask_ListShow");
			},
			def_initDate(){
				if(_this.tabBar.tabIndex == 0){
					_this.startDate = "";
					_this.endDate = _this.def_date("end");
				}else if(_this.tabBar.tabIndex == 1){
					_this.startDateFinish = "";
					_this.endDateFinish = _this.def_date("end")
				}
			},
					/* 上拉加载跟多 分2种情况*/
			do_getMore(){
					let _moreIndex={
					0:{dataLength:_this.dataLength0,anction:"getTraceTask_ListShow"},
					1:{dataLength:_this.dataLength1,anction:"getTraceTask_His_ListShow"}
				}
				if(_this.tabBar.tabIndex == 0){
					_this.queryStr={
							D_Max:_this.endDate,
							D_Min:_this.startDate,
							D_No:_this.queryText,
							PageIndex:_this.pageIndex0,
							Pages:_this.pages
					}
				}else{
					_this.queryStr={
							D_Max:_this.endDateFinish,
							D_Min:_this.startDateFinish,
							D_No:_this.queryText,
							PageIndex:_this.pageIndex1,
							Pages:_this.pages,
							VehicleInfoSN:''
					}
				}

			if (_moreIndex[_this.tabBar.tabIndex].dataLength<_this.pages) {
				_this.loadingText = '没有更多了...';
					return;
				}
				_this.loadingText = '加载中';
				console.log('上拉加载');
				_this.getTraceTask_ListShow(_this.queryStr,_moreIndex[_this.tabBar.tabIndex].anction)
			},
			/* getTraceTaskInfo */
			getTraceTaskInfo(){  
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: "getTraceTaskInfo",
						Data:{
						}
					},
					Callback:_this.cb_getTraceTaskInfo,
					Scope: _this
				})
			},
			cb_getTraceTaskInfo(resJson,scope){
			 if(resJson.state == "back"){
					console.log("我的回访数据nav列表",resJson)
					if(resJson.success){
						_this.myAddData = resJson.data
					}else{
						uni.showModal({
							title:'温馨提示',
							content: resJson.msg,
							showCancel:false
						})
					}
				}
			},
			QueryTraceResultReasonList(type){  //获取跟进原因
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: "QueryTraceResultReasonList",
						Data: {
						}
					},
					Callback:_this.cb_QueryTraceResultReasonList,
					Scope: _this
				})
			},
			cb_QueryTraceResultReasonList(resJson,scope){
				 	console.log("跟进原因总数",resJson)
					if(resJson.success){
						_this.reasonArray = resJson.data
					}else{
							uni.showModal({
								title:'温馨提示',
								content: resJson.msg,
								showCancel:false
							})
					}
			},
			//获取回访数据已完成anction:getTraceTask_ListShow  未完成anction:getTraceTask_His_ListShow
			getTraceTask_ListShow(data,anction){ 
				console.log('_this.finishReq',_this.finishReq);
				if(!_this.finishReq){
					return
				};
				console.log(66);
				_this.finishReq  = false;
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: anction,
						Data:data
					},
					Callback:_this.cb_getTraceTask_ListShow,
					Scope: _this
				})
			},
			cb_getTraceTask_ListShow(resJson,scope){
				 uni.hideLoading()
				_this.finishReq  = true;
					console.log("回访数据",resJson)
					if(resJson.success){
						if(resJson.data.length>0){
							_this.noData = false
						}else{
							_this.noData = true;
							_this.loadingText = '';
							switch(_this.tabBar.tabIndex){
								case  0 :
								if(_this.pageIndex0 == 0){
									_this.visitData = []
								}else{
									_this.loadingText = '没有更多了...';
								}
								break;
								case  1 :
								if(_this.pageIndex1 == 0){
									_this.visitDataFinsh = []
								}else{
									_this.loadingText = '没有更多了...';
								}
								break;
							}

						}
							let _moreIndex={
							0:{dataLength:_this.dataLength0,pageIndex:_this.pageIndex0},
							1:{dataLength:_this.dataLength1,pageIndex:_this.pageIndex1}
						};
							if (_moreIndex[_this.tabBar.tabIndex].dataLength < _this.pages) {
								if (_moreIndex[_this.tabBar.tabIndex].pageIndex >= _this.pages) {
									_this.loadingText = '没有更多了...';
								}else{
									_this.loadingText = '';
								}
							}else {
								_this.loadingText = '加载更多';
							}
							if( resJson.data instanceof Array && resJson.data){ //过滤日期
								  resJson.data.forEach((item)=>{
									item.ExpireDate=_this.$ZcPublic.formatDate(item.ExpireDate,'yyyy-MM-dd');
									item.ForwardDate=_this.$ZcPublic.formatDate(item.ForwardDate,'yyyy-MM-dd');
									item.PlanCallDate=_this.$ZcPublic.formatDate(item.PlanCallDate,'yyyy-MM-dd hh:mm:ss');
								})
							}
							if(_this.tabBar.tabIndex =="0"){
								console.log('_this.pageIndex0回调',_this.pageIndex0);
								if(_this.pageIndex0 == 0){
									_this.visitData = resJson.data
									_this.loadingText = '';
									_this.dataLength0 = resJson.data.length;
									_this.pageIndex0 = _this.pageIndex0+resJson.data.length;	// 初始化 下次加载开始下标
								}else{
										_this.visitData =_this.visitData?[..._this.visitData,...resJson.data]:resJson.data ;
										_this.dataLength0 = resJson.data.length;
										_this.pageIndex0 = _this.pageIndex0+resJson.data.length;	// 初始化 下次加载开始下标
								}
              console.log("合并后数据_this.visitData",_this.visitData);
							}else{
								
									 if(resJson.data instanceof Array &&resJson.data){
											resJson.data.forEach((item,index)=>{
// 												item.rnextTraceDate = _this.$ZcPublic.formatDate( item.rnextTraceDate,'yyyy-MM-dd');
												item.PlanCallDate = _this.$ZcPublic.formatDate( item.PlanCallDate,'yyyy-MM-dd');
												item.F_TraceDate = _this.$ZcPublic.formatDate( item.F_TraceDate,'yyyy-MM-dd');
												item.F_nextTraceDate = _this.$ZcPublic.formatDate( item.F_nextTraceDate,'yyyy-MM-dd');
												item.F_ModifyExpireDate = _this.$ZcPublic.formatDate( item.F_ModifyExpireDate,'yyyy-MM-dd');
												item.ExpireDate =_this.$ZcPublic.formatDate( item.ExpireDate,'yyyy-MM-dd');

												_this.$set(item,"id",index);
									 })
								}
								if(_this.pageIndex1 == 0){
									_this.visitDataFinsh = resJson.data
									_this.loadingText = '';
								}else{
										_this.visitDataFinsh =_this.visitDataFinsh?[..._this.visitDataFinsh,...resJson.data]:resJson.data ;
								}
								_this.dataLength1 = resJson.data.length;
								_this.pageIndex1 = _this.pageIndex1+resJson.data.length;	// 初始化 下次加载开始下标
								console.log('合并后_this.visitDataFinsh',_this.visitDataFinsh);
							}
            
							_this.timeSelectShow = false  //隐藏选择时间组件
					}else{
						uni.showModal({
							title:'温馨提示',
							content: resJson.msg,
							showCancel:false
						})
					}
			},
			do_changeItem(item){ //跟新组件数据
				_this.$set(_this.visitData.doTraceList,item.id,item);
			},
			tapTab(e){
				_this.tabBar.tabIndex = e;
				_this.do_search("isTab")
			},
			swiperChange(e){
				console.log(e);
				_this.tabBar.tabIndex = e.detail.current;
				//_this.do_search("isTab")
			},
			getStartDate(e){
				if(_this.tabBar.tabIndex == "0"){
						_this.startDate = e.detail.value;
						console.log(_this.startDate);
				}else{
					_this.startDateFinish = e.detail.value;
				}

				//_this.isStartTime = false
			},
			getEndDate(e){
				if(_this.tabBar.tabIndex == "0"){
					_this.endDate = e.detail.value;
				}else{
					_this.endDateFinish = e.detail.value;
				}
			},
			do_edit(item){
				uni.navigateTo({
					url: '../visit_task_follow/visit_task_follow?TraceTaskSN='+item.SN
				});
			},
			do_searchDetail(){
				if(_this.tabBar.tabIndex == "0"){
					_this.endDateShow = _this.endDate
					if(_this.startDate){
						_this.startDateShow = _this.startDate
					}
				}else{
					_this.endDateShow = _this.endDateFinish;
						if(_this.startDate){
						_this.startDateShow = _this.startDateFinish
					}
				}
				_this.timeSelectShow = true
			},
			do_search(item){
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				_this.pageIndex0 = 0 ;
				_this.pageIndex1 = 0
				_this.showTost = true;
				_this.queryStr.D_No = _this.queryText;
				if(_this.tabBar.tabIndex == 0){
					_this.queryStr.D_Min =  _this.startDate;
					_this.queryStr.D_Max = _this.endDate;
					_this.queryStr.PageIndex = _this.pageIndex0
					console.log('_this.pageIndex0 taber',_this.pageIndex0 );
					_this.getTraceTask_ListShow(_this.queryStr,"getTraceTask_ListShow")
				}else{
					_this.queryStr.D_Min =  _this.startDateFinish;
					_this.queryStr.D_Max = _this.endDateFinish;
					_this.queryStr.PageIndex =  _this.pageIndex1;
					_this.queryStr.VehicleInfoSN=''
					_this.getTraceTask_ListShow(_this.queryStr,"getTraceTask_His_ListShow")
				}
			},
			do_closeSearcd(){
				_this.timeSelectShow = false
			},
			def_date(item){
				let _date= new Date();
				let year =_date.getFullYear();
				let month = _date.getMonth() +1;
				let day = _date.getDate();
				if(item == "end"){
					month = month + 3;
					if(month>12){
						month = month -12 ;
						year++
					}
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;	
				
				return `${year}-${month}-${day}`;
			},
		}
	}
</script>

<style>
	.swiper-tab-list{width: 50%!important;background-color: #50ADFD;border: none!important;padding: 20upx 0!important; color: #fff;}
		.uni-tab-bar .active{color: #fff!important;background-color: #50ADFD;position: relative;text-align: center;}
		.uni-tab-bar .active:after{content: '';position: absolute;width: 25%;height: 5upx;background-color: #fff;left: 38%;bottom: 8upx;border-radius: 3upx;}
	.zc-swiper-tab{display: flex;border: none !important;width: 100%;}
.swiper-box{
position: absolute;
top:285upx;
bottom:0;
width: 100%;
}
swiper{
height: auto; 
}
.scroll-view{
	height: 100%;
}
.content{
	background-color: #F6F9FE;
}
.search-wrap{
	height: 80upx;
	line-height: 80upx;
	margin:0 10upx 30upx 10upx;
	background-color: #fff;
	box-shadow: 1upx 1upx 5upx 4upx #EAEDF1;
	border-radius: 10upx;
}
.search-wrap .icon-sousuo1{
	flex: 0 0 90upx;
	font-size: 36upx;
	text-align: center;
	margin-left: 8upx;
	color: #50ADFD;
}
.search-right{
	flex: 0 0 150upx;
	border-left: 1upx solid #CCCCCC;
	color: #6F6F6F;
	height: 50upx;
}

.search-wrap>input{
	flex: 1;
	height: 80upx ;
	line-height: 80upx;
	margin-right: 10upx;
}
.icon-shaixuan{
	color: #3BADFE;
	font-size: 39upx;
	margin-right: 10upx;
	position: relative;
	top: 4upx;
}
/* 列表 */
.task-wrap{
	margin: 0 20upx 30upx 20upx;
	border-radius: 25upx;
	background-color: #fff;
	box-shadow: 1upx 1upx 5upx 4upx #EAEDF1;
	overflow: hidden;
	padding-bottom:20upx ;
}
.task-wrap>.task-title{
	height: 80upx;
	line-height: 80upx;
	/* background: #0BD9B2; */
	color: #333;
	border-bottom: 1upx solid #e5e5e5;
}
.task-wrap>view{
		padding: 0 30upx 0 40upx;
}
.task-title>view{
	height: 100%;
}
.car-id{
	height: 80upx;
}
.car-id>view:first-child{
font-size: 34upx;
font-weight: 500;
margin-right: 14upx;
}
.car-id>view:last-child{
	color: #5E5E5E;
	font-size: 24upx;
}
.icon-bianji{
	color: #4DADFC;
	font-size: 40upx;
}
.height-fixed{
	height: 45upx;
	line-height: 40upx;
}
.task-title-finish {
	background-color: #A2BCD3 !important;
}
.searcd-detail{
	position: absolute;
	top:0;
	bottom: 0;
	width: 100%;
	background-color: rgba(0,0,0,.5);
	z-index: 999;
	padding: 20upx 10upx;
	box-sizing: border-box;
}
.searcd-detail .search-wrap{
	margin-top: 10upx;
	box-shadow:none;
}

.time-select{
	height: 300upx;
	margin: 0 10upx;
	border-radius: 10upx;
	padding: 35upx 25upx 35upx 25upx;
	background-color: #EEEEEE;
}
	.date-wraper{
		height: 120upx;
		padding: 0 25upx;
	}
	.date-wraper .picker{
		height: 70upx;
		line-height: 70upx;
		width: 260upx;
		border-radius: 10upx;
		/* border: 1upx solid #E0E0E0; */
		background-color: #fff;
		box-shadow: 1upx 1upx 5upx 4upx #EAEDF1;
	}
	.date-wraper .line{
		width: 60upx;
		height: 4upx;
		background-color:#D8D8D8 ;
	}
	.search-btn button{
		width: 60%;
		background-color: #50ADFD;
		height: 90upx;
		margin-top: 40upx
	}
	.button-hover{
		background-color: #50ADFD !important;
	}
	.time-select>view:first-child{
		padding:0 30upx;
		height: 50upx;
		line-height: 60upx;
	}
	.startTime{
		opacity: 0;
	}
	.startTime2{
		opacity: 1;
	}
		/* 2019-11-28修改 移植过来的回访完成列表 */
	.card-info{
		background-color: #fff;
		box-shadow: 1upx 1upx 5upx 4upx #EAEDF1;
		border-radius: 20upx;
	  margin:0 20upx ;
		overflow: hidden;
	}
.tab-nav{
	background-color: #50ADFD;
	width: 100%;
	height: 70upx;
}
.tab-nav>view{
	height: 70upx;
	padding: 0 30upx;
	color: #fff;
}
.myAddDataCount{
	margin-left: 10upx;
}
.cercle{
	width: 32upx;
	height: 32upx;
	border-radius: 50%;
	margin-right: 20upx;
	position: relative;
	top:3upx
}
</style>
